<script setup lang="ts">
import Icon from "./Icon.vue";

const props = defineProps<{
  title: string;
  href?: string;
  target?: string;
  value: string | number;
}>();

defineEmits<{
  click: [];
}>();

const model = defineModel<string | number | undefined>();

const handleClick = () => {
  model.value = props.value === model.value ? undefined : props.value;
};
</script>

<template>
  <div>
    <div class="flex h-54px items-center px-4">
      <a class="flex-auto h-full flex items-center" :href="href" :target="target">{{ title }}</a>
      <Icon
        name="ArrowBottom"
        class="text-xl duration-200"
        :class="{ 'rotate-180': model === value }"
        @click="handleClick"
      />
    </div>

    <div class="bg-#f2f2f2" v-show="model === value">
      <slot />
    </div>
  </div>
</template>
